<template>
  <el-container class="index-con">
    <el-header class="index-header">
      <navcon></navcon>
    </el-header>
    <el-container>
      <el-aside :class="showclass">
        <leftnav></leftnav>
      </el-aside>
      <el-main class="index-main">
        <tagsview></tagsview>
        <el-card id="cardTable" shadow="never">
          <router-view></router-view>
        </el-card>
      </el-main>
      <div class="openTheme" @click="theme()">
        <i class="el-icon-s-tools"></i>
      </div>
      <theme ref="openTheme"></theme>
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from '../components/navcon.vue'
import leftnav from '../components/leftnav.vue'
import theme from '../components/RightPanel.vue'
import tagsview from "../components/TagsView.vue"
export default {
  name: 'index',
  data() {
    return {
      showclass: 'asideshow',
      showtype: false,
      tableHeight: document.documentElement.clientHeight - 300,
      clientHeight: document.documentElement.clientHeight - 120,
      smTableHeight: document.documentElement.clientHeight - 380
    }
  },
  // 注册组件
  components: {
    navcon,
    leftnav,
    theme,
    tagsview
  },
  methods: {
    theme() {
      this.$refs.openTheme.init()
    },
    myHeight() {
      document.getElementById('cardTable').style.height = this.clientHeight + 'px';
      document.getElementById('cardTable').style.height = (document.documentElement.clientHeight - 160) + 'px';
      window.onresize = this.debounce(this.handle, 300);
    },
    debounce(fn, wait) {
      var timer = null;
      return () => {
        if (timer !== null) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
      }
    },
    handle() {
      const that = this;
      document.getElementById('cardTable').style.height = (document.documentElement.clientHeight - 120) + 'px';
      that.tableHeight = document.documentElement.clientHeight - 300
      that.smTableHeight = document.documentElement.clientHeight - 380
    }
  },
  mounted() {
    this.myHeight()//main 部分高度
  },
  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow'
      } else {
        setTimeout(() => {
          this.showclass = 'aside'
        }, 300)
      }
    })
    
  },
  beforeUpdate() { },
  // 挂载前状态(里面是操作)
  beforeMount() {
    // 弹出登录成功
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  },
  destroyed() {
    window.onresize = () => {}
  }
}
</script>
<style scoped>
/* .el-table{
  border-radius: 5px;
} */
#cardTable {
  /* height: 97%; */
  margin: 14px 14px 0px 14px;
  padding: 15px 20px 15px 20px;
  overflow: hidden;
  overflow-y: auto;
  background: rgb(255, 255, 255);
  border-radius: 20px;
}

.openTheme {
  position: fixed;
  right: 0;
  top: 50%;

  width: 48px;
  /* background: rgb(51, 65, 87); */
  background: #eaedf1;
  box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 10%);
  height: 48px;
  /* position: absolute;
  left: -48px; */
  text-align: center;
  font-size: 24px;
  border-radius: 6px 0 0 6px !important;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  opacity: .7;
  color: #fff;
  line-height: 48px;
}

.openTheme:hover {
  opacity: 1;
}

.openTheme i {
  font-size: 24px;
  line-height: 48px;
}

.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.aside {
  width: 64px !important;
  height: 100%;
  background-color: #eaedf1;
  margin: 0px;
}

.asideshow {
  overflow: hidden;
  width: 200px !important;
  height: 100%;
  background-color: #eaedf1;
  margin: 0px;
  box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 10%);
  z-index: 999;
}

.index-header,
.index-main {
  padding: 0px;
  background: rgb(225, 234, 246);
  /* border-left: 2px solid #333; */
}

.index-header {
  z-index: 2000;
  width: 100%;
  height: 60px;
  background: #eaedf1;
  -webkit-box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 10%);
  box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 10%);
  /* position: fixed; */
  overflow: hidden;
}
</style>
